<template>
    <div class="zhang">
        <div>
            <h1 style="text-align: left;">账号信息</h1>
            <el-divider></el-divider>
            <div style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);height: 200px">
                <el-container>
                    <el-header class="tille" style="height: 30px;background-color: #7cb7f2;color:white;">联系信息
                    </el-header>
                    <el-main>
                        <ul>
                            <div>电子邮件</div>
                            <div>{{ email_index }}</div>
                        </ul>
                        <ul>
                            <div>手机号码</div>
                            <div>{{ telephone }}</div>
                        </ul>
                    </el-main>
                </el-container>
            </div>
            <div style="height: 80px"></div>
            <div style="box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);height: 200px">
                <el-container>
                    <el-header style="height: 30px;background-color: #7cb7f2;color:white;" class="tille">擅长领域
                    </el-header>
                    <el-main>
                        <ul>
                            <div>
                                出生日期:
                            </div>
                            <div>
                                {{ brith_index }}
                            </div>
                        </ul>
                        <ul>
                            <div>
                                个人简介
                            </div>
                            <div>
                                {{ introduce_index }}
                            </div>
                        </ul>
                    </el-main>
                </el-container>
            </div>


        </div>
        <div style="height: 50px"></div>
        <!--      <p style="text-align: right;margin: 10px"> <el-link type="primary" >编辑信息</el-link></p>-->
        <el-button type="text" @click="dialogVisible = true" style="text-align: right;margin: 10px">编辑信息 Dialog
        </el-button>

        <el-dialog
                title="编辑"
                :visible.sync="dialogVisible"
                width="43%"
                :before-close="handleClose">
            <div style="display: flex;margin: 5px">
                <span style="width: 30%">电子邮件</span>
                <el-input v-model="email" placeholder="请输入内容" style="width: 70%"></el-input>

            </div>
            <div style="display: flex;margin: 5px">
                <span style="width: 30%">手机号码：</span>
                <el-input v-model="telnumber" placeholder="请输入内容" style="width: 70%"></el-input>


            </div>
            <div style="margin: 5px">
                <div class="block">
                    <span class="demonstration">出生日期</span>
                    <el-date-picker
                            v-model="brith"
                            type="date"
                            placeholder="选择日期">
                    </el-date-picker>
                </div>
            </div>
            <div class="final" style="margin: 5px">
                <div style="margin: 5px;width: 30%" class="left-panel">个人简介</div>
                <el-input class="right-panel"
                          type="textarea"
                          placeholder="请输入内容"
                          v-model="introduce"
                          maxlength="30"
                          show-word-limit
                          style="width: 70%"
                >
                </el-input>
            </div>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="handleSubmit">提 交</el-button>
  </span>
        </el-dialog>
    </div>
</template>

<style scoped>

.left-panel {
    flex: 1; /* 占据剩余空间 */
}

.right-panel {
    flex: 2; /* 占据更多空间，可以根据需要调整比例 */
}

.final {
    display: flex;
}

.zhang {
    color: #3b3b3b;
    margin: 10px;
}

ul {
    margin: 10px;
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-between;
}

.tille {
    height: 20px;
    text-align: left;
    justify-content: center;
    align-items: center;
}
</style>
<script>
import axios from 'axios';

export default {
    data() {
        return {
            introduce_index: '',
            brith_index: '',
            email_index: '',
            telephone: '',
            dialogVisible: false,
            text: '',
            introduce: '',
            brith: '',
            telnumber: '',
            email: ''
        };
    },
    methods: {
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {
                });
        },
        handleSubmit() {
            const data = {
                id: this.$store.getters.getuserId,
                username: this.$store.getters.getuserName,

                ...(this.email && { email: this.email }),
                ...(this.telnumber && { telnumber: this.telnumber }),
                ...(this.brith && { brith: this.brith }),
                ...(this.introduce && { introduce: this.introduce }),
            };console.log("hhh嘿嘿"+this.$store.getters.getuserName);
            axios.post('/api/update_info', data)
                .then(response => {
                    console.log('请求成功', response.data);
                    this.getInfo();
                })
                .catch(error => {
                    console.error('请求失败', error);
                })
                .finally(() => {
                    // 无论成功或失败，都会执行的逻辑
                    this.dialogVisible = false; // 关闭对话框
                });
        },
        getInfo() {
            const userId = this.$store.getters.getuserId;
            console.log("哈哈哈"+userId);
            axios.get(`/api/userinfo?id=${userId}`)
                .then(response => {
                    const responseData = response.data;
                    this.email_index = responseData.email;
                    this.brith_index = responseData.brith;
                    this.telephone = responseData.telnumber;
                    this.introduce_index = responseData.introduce;
                    console.log("你好"+response.data+this.email_index)
                })
                .catch(error => {
                    console.error('Error fetching data:啊啊啊啊', error);
                });
        }
    },
    mounted() {
        this.getInfo()
    }
};
</script>
